<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猫狗互换</title>
    <script type="text/javascript">
        function Change(){
            var imgs = document.getElementsByTagName("img");
            var CatAndDog = document.getElementById("CatAndDog");

            if("查看多少只猫切换成了狗" ==CatAndDog.value){
                alert(imgs.length+"只猫切换成了狗!");
                for (let i = 0; i < imgs.length; i++) {
                    imgs[i].src = "../png/"+(i+4)+".png";
                }
                CatAndDog.value="查看多少只狗切换成了猫";
                return true;
            }

            alert(imgs.length+"只狗切换成了猫!");
            for (let i = 0; i < imgs.length; i++) {
                imgs[i].src = "../png/"+(i+1)+".png";
            }
            CatAndDog.value="查看多少只猫切换成了狗";
            return true;

        }
    </script>
</head>
<body>
<img src="../png/1.png" height="236">
<img src="../png/2.png" height="236">
<img src="../png/3.png" height="236">
<br>
<input type="button" id="CatAndDog"
       name="cat"
       onclick =Change()
       value="查看多少只猫切换成了狗">
</body>
</html>